<template>
  <div class="postManage">
    <div class="searchBox">
      <div class="left">
        <label for="">岗位名称：</label>
        <el-input placeholder="请输入岗位名称" v-model="positionName" />
      </div>
      <div class="right">
        <el-button type="primary" @click="searchpost">
          <el-icon><Search /></el-icon>
          搜索
        </el-button>
        <el-button type="primary" @click="reset">
          <el-icon><Refresh /></el-icon>
          重置
        </el-button>
        <el-button type="primary" @click="addpost">
          <el-icon><Plus /></el-icon>
          新增岗位
        </el-button>
      </div>
    </div>
    <common-table
      :style="{ flex: 1 }"
      :table-data="tableData"
      :columns="columns"
      :pagination="pagination"
    >
      <template #state="{ row }">
        <el-tag :type="row.positionStatus == '0' ? 'success' : 'danger'">
          {{ row.positionStatus == '0' ? '正常' : '异常' }}
        </el-tag>
      </template>
      <template #operate="{ row }">
        <el-link type="primary" style="margin-right: 8px" @click="updatebtn(row)">
          <el-icon :size="20">
            <Edit />
          </el-icon>
          <span>修改</span>
        </el-link>
        <el-link type="danger" style="margin-right: 8px" @click="deletebtn(row)">
          <el-icon :size="20"><Delete /></el-icon>
          <span>删除</span>
        </el-link>
        <el-link type="info" @click="postPeo(row)">
          <el-icon><View /></el-icon>
          <span>查看</span>
        </el-link>
      </template>
    </common-table>
    <!-- 岗位人员弹出框 -->
    <el-dialog width="60%" height="50vh" v-model="dialogTableVisible">
      <div class="find">
        姓名：
        <el-input v-model="employee" class="diainput" />
        <el-button type="primary" @click="searchemp">
          <el-icon><Search /></el-icon>
          搜索
        </el-button>
        <el-button type="primary" @click="resetemp">
          <el-icon><Refresh /></el-icon>
          重置
        </el-button>
      </div>
      <div class="dialog_con">
        <el-table :data="gridData">
          <el-table-column type="index" width="50" />
          <el-table-column property="status" label="试用期" />
          <el-table-column property="name" label="姓名" />
          <el-table-column property="salary" label="薪资" />
          <el-table-column property="phone" label="联系方式" />
          <el-table-column property="address" label="地址" />
          <el-table-column property="email" label="邮箱" />
        </el-table>
        <div class="example-pagination-block">
          <el-pagination layout="prev, pager, next" :total="50" />
        </div>
      </div>
    </el-dialog>
    <!-- 新增，修改岗位弹出框 -->
    <el-dialog class="addDialog" v-model="centerDialogVisible" :title="title" width="25%">
      <el-form ref="addFormRef" :model="addForm" :rules="addrules">
        <el-form-item label="岗位：" prop="addpostname">
          <el-input class="addDialog_input" v-model="addForm.addpostname" />
        </el-form-item>
        <el-form-item label="薪资：" prop="addsalary">
          <el-input class="addDialog_input" v-model="addForm.addsalary" type="number" />
        </el-form-item>
        <el-form-item label="岗位ID:" prop="positionId" v-if="isAdd === false">
          <el-input class="addDialog_input" v-model="addForm.positionId" disabled />
        </el-form-item>
        <el-form-item label="状态：" prop="addpositionStatus">
          <el-select
            v-model="addForm.addpositionStatus"
            class="m-2"
            placeholder="请选择状态"
            size="large"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="部门：">
          <el-cascader
            :options="deplists"
            :props="props1"
            clearable
            :show-all-levels="false"
            @change="getCheckedNodes"
          />
          <!-- <el-cascader :options="options" :show-all-levels="false" /> -->
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="postfalse(addFormRef)">关闭</el-button>
          <el-button type="primary" @click="postOk">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import CommonTable from '@/components/CommonTable.vue';
import { columns, tableDataText } from '@/views/postManage/mockData';
import {
  getAllPositionsAPI,
  deletePositionsAPI,
  getEmployeeByPositionIdAPI,
  getDepartmentAPI,
  addPositionsAPI,
  updatePositionAPI,
} from '@/api/postManage.js';
import { onBeforeMount } from 'vue';

//表格数据
const limit = 10;
const page = 1;
// 分页
const pagination = ref({
  pageNum: 1,
  pageSize: 10,
  total: 0,
});
const positionName = ref('');
const positionStatus = ref('');
const props1 = {
  checkStrictly: true,
};
const tableData = ref([]);
const getAllPositions = async () => {
  const info = await getAllPositionsAPI({
    positionName: positionName.value,
    positionStatus: positionStatus.value,
    page: pagination.value.pageNum,
    limit: pagination.value.pageSize,
  });
  console.log(info.data);
  tableData.value = info.data.positionsList;
  pagination.value.total = info.data.count * 1;
};

const deplists = ref([]);
const getdeplists = async () => {
  const info = await getDepartmentAPI();
  console.log(info.data);
  deplists.value = info.data;
};
onBeforeMount(() => {
  getAllPositions();
  getdeplists();
});

//岗位人员弹出框
const dialogTableVisible = ref(false);
const employee = ref('');
const gridData = ref([]);

//新增，修改弹出框
const centerDialogVisible = ref(false);
const title = ref('');

const addForm = ref({
  addpostname: '',
  addsalary: '',
  addpositionStatus: '',
  adddepartmentId: '',
  positionId: '',
});
const options = [
  {
    value: 0,
    label: '正常',
  },
  {
    value: 1,
    label: '异常',
  },
];
const isAdd = ref(true);
const addrules = {
  addpostname: [{ required: true, message: '必须输入岗位名称', trigger: 'blur' }],
  addsalary: [{ required: true, message: '必须输入岗位薪资', trigger: 'blur' }],
  addpositionStatus: [{ required: true, message: '状态不能为空', trigger: 'change' }],
};

// const updatainfo = ref('')
//修改岗位
const updatebtn = async (row) => {
  getdeplists();
  isAdd.value = false;
  title.value = '修改';
  console.log(row);
  console.log(row.positionId);
  addForm.value.addpostname = row.positionName;
  addForm.value.addsalary = row.salary;
  addForm.value.addpositionStatus = row.positionStatus;
  addForm.value.adddepartmentId = row.departmentId;
  addForm.value.positionId = row.positionId;
  centerDialogVisible.value = true;
};

//重置
const reset = () => {
  positionName.value = '';
  getAllPositions();
};

//删除岗位
const deletebtn = async (row) => {
  ElMessageBox.confirm('确定要删除吗，是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    const info = await deletePositionsAPI(row.positionId);
    console.log(info);
    const msg = info.message;
    if (info.code == '200') {
      ElMessage({
        type: 'success',
        message: msg,
      });
      positionName.value = '';
      getAllPositions();
    }
    if (info.code == '500') {
      const msgFoo = () => {
        return msg;
      };
      ElMessage({
        type: 'error',
        message: msgFoo,
      });
      positionName.value = '';
      getAllPositions();
    }
  });
};
//新增岗位
const addpost = () => {
  getdeplists();
  console.log('add');
  title.value = '新增';
  isAdd.value = true;
  addForm.value.addpostname = '';
  addForm.value.addsalary = '';
  addForm.value.addpositionStatus = '';
  addForm.value.adddepartmentId = null;
  centerDialogVisible.value = true;
};

const addFormRef = ref(null);

const postOk = async () => {
  if (isAdd.value === true) {
    addFormRef.value.validate(async (valid) => {
      if (valid) {
        const info = await addPositionsAPI({
          positionName: addForm.value.addpostname,
          departmentId: addForm.value.adddepartmentId,
          salary: addForm.value.addsalary,
          positionStatus: addForm.value.addpositionStatus,
        });
        getAllPositions();
        centerDialogVisible.value = false;
        ElMessage({
          showClose: true,
          message: '添加成功',
          type: 'success',
        });
        console.log(info.data);
      }
    });
  } else {
    const info = await updatePositionAPI({
      positionName: addForm.value.addpostname,
      departmentId: addForm.value.adddepartmentId,
      salary: addForm.value.addsalary,
      positionStatus: addForm.value.addpositionStatus,
      positionId: addForm.value.positionId,
    });
    centerDialogVisible.value = false;
    ElMessage({
      showClose: true,
      message: '修改成功',
      type: 'success',
    });
    console.log(info.data);
    getAllPositions();
  }
};

// 查看岗位人员
const positionId = ref();
const empPage = ref(1);
const emplimit = ref(10);

const postPeo = async (row) => {
  positionId.value = row.positionId;
  console.log(positionId.value);
  dialogTableVisible.value = true;
  const info = await getEmployeeByPositionIdAPI({
    positionId: positionId.value,
    name: employee.value,
    page: empPage.value,
    limit: emplimit.value,
  });
  console.log(info.data.employeesList);
  gridData.value = info.data.employeesList;
};

//搜索
const searchpost = async () => {
  const info = await getAllPositionsAPI({
    positionName: positionName.value,
    positionStatus: positionStatus.value,
    page,
    limit,
  });
  console.log(info.data);
  tableData.value = info.data.positionsList;
  pagination.value.total = info.data.count * 1;
};

//岗位人员搜索
const searchemp = async () => {
  const info = await getEmployeeByPositionIdAPI({
    positionId: positionId.value,
    name: employee.value,
    page: empPage.value,
    limit: emplimit.value,
  });
  console.log(info.data.employeesList);
  gridData.value = info.data.employeesList;
};
const resetemp = async () => {
  employee.value = '';
  const info = await getEmployeeByPositionIdAPI({
    positionId: positionId.value,
    name: employee.value,
    page: empPage.value,
    limit: emplimit.value,
  });
  console.log(info.data.employeesList);
  gridData.value = info.data.employeesList;
};
const prev = () => {
  console.log(111);
};

const setPage = (v) => {
  pagination.value.pageNum = v;
  getAllPositions();
};

const setSize = (v) => {
  pagination.value.pageNum = 1;
  pagination.value.pageSize = v;
  getAllPositions();
};

const getCheckedNodes = (val) => {
  addForm.value.adddepartmentId = val.slice(-1)[0];
  // console.log(addForm.value.adddepartmentName[0]);
};

const postfalse = (addFormRef) => {
  addFormRef.resetFields();
  centerDialogVisible.value = false;
};

defineExpose({
  setPage,
  setSize,
});
</script>

<style scoped lang="less">
.postManage {
  background-color: #ffffff;
  flex: 1;
  max-height: 100%;
  display: flex;
  flex-direction: column;
}

.searchBox {
  display: flex;
  align-items: center;
  padding: 0 24px;
  height: 32px;

  margin: 16px 0;

  .left {
    display: flex;
    align-items: center;
    margin-right: 18px;
  }

  label {
    width: 100px;
    font-size: 14px;
    color: #999999;
    margin-right: 3px;
  }
}

.dialog_con {
  height: 55vh;
  overflow: auto;
  position: relative;
}
.example-pagination-block {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.find {
  margin-bottom: 20px;
  padding-left: 10px;
}
.diainput {
  width: 200px;
  margin-right: 20px;
}

.addDialog_input {
  width: 280px;
}
</style>
